<template>
  <el-drawer title="添加上传生成代码" direction="rtl" size="50%" v-on:close="Load()">
    <el-form :model="form" label-width="120px">
      <el-col :span="12">
        <el-form-item label="生成代码名字">
          <el-input v-model="uploadmakecode_name" disabled placeholder="请输入生成代码名字" />
        </el-form-item>
      </el-col>
      <el-form-item label='生成代码预览图片'>
        <el-upload 
        action='#' :auto-upload=' false'
          list-type='picture-card' :http-request=' false' :on-change=' handlePictureCardPreviewImg '
          :on-preview=' handlePreviewImg ' :on-remove=' handleRemoveImg ' limit='1'>
        </el-upload>
        <el-dialog v-model=' dialogVisibleImg '>
          <img w-full style='height: 50vh;' :src=' UploadSrc ' alt='Preview Image' />
        </el-dialog>
      </el-form-item>
      
      <el-col :span=" 12">
        <el-form-item label="生成代码类型">
          <el-select v-model="uploadmakecode_type" placeholder="请选择生成代码类型">
               <el-option v-for="item in makecodetype_list" :label="item.makecodetype_name" :value="item.makecodetype_guid" />
          </el-select>
     </el-form-item>

     <el-form-item label='上传生成代码内容' v-if="uploadmakecode_type">
      <el-upload 
      action='#' :auto-upload=' false'
        list-type='picture-card' :http-request=' false' 
        :on-change=' handlePictureCardPreview '
        :on-preview=' handlePreview '
         :on-remove=' handleRemove ' 
         limit='1'>
      </el-upload>
      <el-dialog v-model=' dialogVisible '>
        <img w-full style='height: 50vh;' :src=' UploadSrc ' alt='Preview Image' />
      </el-dialog>
    </el-form-item>


      </el-col>
    </el-form>
    <el-button type="success" v-on:click="Add()">添加</el-button>
  </el-drawer>
</template>
<script setup lang="ts">
import { ref,onMounted } from 'vue'
import { Load, Upload, getBase64, CloseUpload } from '/src/style.js'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { AddUploadmakecode } from '../../../../service/Uploadmakecode.js'
import {getMakecodetypeList} from '/src/service/Makecodetype.js'


//*上传文件
const dialogVisible = ref(false)
const UploadFile = ref()
const UploadName = ref()
const CloseUploadName = ref()
const UploadSrc = ref('')
const form = ref()

const uploadmakecode_name = ref("")
const uploadmakecode_img = ref("")
const uploadmakecode_type = ref("")


const dialogVisibleImg = ref(false)
const UploadNameImg = ref('')


const makecodetype_list = ref([])
onMounted(()=>{
  getMakecodetypeList().then((res)=>
  {
    makecodetype_list.value = res.data
  })
})


//*文件上传成功
const handlePictureCardPreviewImg: UploadProps['onPreview'] = (uploadFile, fileList) => {
  getBase64(uploadFile.raw).then(res => {
    const params = res.split(',') //*分割类型和base64内容
    UploadFile.value = params[1]
    console.log(uploadFile)
    UploadNameImg.value = uploadFile.name
    uploadmakecode_img.value = uploadFile.name
    const data = { name: uploadFile.name, size: uploadFile.size, file: params[1],type:uploadFile.raw.type }
    Upload(data)
    UploadSrc.value = "/src/assets/upload/" + UploadName.value
  })
}
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile, fileList) => {
  getBase64(uploadFile.raw).then(res => {
    const params = res.split(',') //*分割类型和base64内容
    UploadFile.value = params[1]
    console.log(uploadFile)
    UploadName.value = uploadFile.name
    uploadmakecode_img.value = uploadFile.name
    const data = { name: uploadFile.name, size: uploadFile.size, file: params[1],type:uploadFile.raw.type }
    Upload(data)
    uploadmakecode_name.value = uploadFile.name
    UploadSrc.value = "/src/assets/upload/" + UploadName.value
  })
}
//*文件移除时
const handlePreviewImg = (uploadFile) => {
  CloseUploadName.value = uploadFile.name
  const data = { name: CloseUploadName.value,type:uploadFile.raw.type }
  CloseUpload(data)
}
const handleRemove = (uploadFile) => {
  CloseUploadName.value = uploadFile.name
  uploadmakecode_name.value = ''
  const data = { name: CloseUploadName.value,type:uploadFile.raw.type }
  CloseUpload(data)
}
//*预览图片
const handleRemoveImg = () => {
  dialogVisibleImg.value = true
}

const handlePreview = () => {
  dialogVisible.value = true
}





const Add = () => {
  const data = {
    uploadmakecode_name: uploadmakecode_name.value,
    uploadmakecode_img: UploadNameImg.value,
    uploadmakecode_type: uploadmakecode_type.value,
  }
  AddUploadmakecode(data).then((res) => {
    console.log(res)
  })
}


</script>
     
     
<style></style>